<template v-loading="loadings">
  <div class="user safe-width">
    <div class="user-info">
      <div class="user-info-bg">
        <img src="../../../static/bg.png"/>
        <div class="user-info-bg-change-btn">
          <svg viewBox="0 0 20 12" class="Icon Icon--camera Icon--left" width="14" height="16" aria-hidden="true" style="height: 16px; width: 14px;"><title></title><g><path d="M18.094 2H15s-1-2-2-2H7C6 0 5 2 5 2H2C0 2 0 3.967 0 3.967V14c0 2 2.036 2 2.036 2H17c3 0 3-1.983 3-1.983V4c0-2-1.906-2-1.906-2zM10 12c-1.933 0-3.5-1.567-3.5-3.5S8.067 5 10 5s3.5 1.567 3.5 3.5S11.933 12 10 12zm0 1.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm7.5-8c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z" fill-rule="evenodd"></path></g></svg>
          编辑封面图片
        </div>
      </div>
      <div class="user-info-content">
        <div class="user-avatar" @mouseenter="isShowChangeAvatar = true" @mouseleave="isShowChangeAvatar = false">
          <img :src="users.avatar"/>
          <div class="user-avatar-change-btn" v-if="isShowChangeAvatar">
            <svg class="Zi Zi--Camera UserAvatarEditor-cameraIcon" fill="currentColor" viewBox="0 0 24 24" width="36" height="36"><path d="M20.094 6S22 6 22 8v10.017S22 20 19 20H4.036S2 20 2 18V7.967S2 6 4 6h3s1-2 2-2h6c1 0 2 2 2 2h3.094zM12 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0 1.5a5 5 0 1 0-.001-10.001A5 5 0 0 0 12 17.5zm7.5-8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" fill-rule="evenodd"></path></svg>
            <p>修改我的头像</p>
          </div>
        </div>
        <div class="users-all-info">
          <p class="user-name">
            {{users.username? users.username : '请补全用户名称' }}
            <span style="margin-left: 10px;">
              {{users.abstract? users.abstract : '请补全用户信息'}}
            </span>
          </p>
          <p class="user-intro" style="color: #8590a6;">
            {{users.apartment? users.apartment : '请补全用户介绍'}}
          </p>
        </div>
        <div class="change-into-btn" @click="gotoUserInfo">
          编辑个人资料
        </div>
      </div>
    </div>
    <div class="user-content">
      <main class="user-main">
        <div class="user-tab">
          <el-tabs @tab-click="handleClick">
            <el-tab-pane name="u1">
              <span slot="label">
                <i class="el-icon-view"></i>
                我的关注
                <em>10</em>
              </span>
              <div>11</div>
            </el-tab-pane>
            <el-tab-pane name="u2">
              <span slot="label">
                <i class="el-icon-date"></i>
                动态
                <em>8</em>
              </span>
              <div>22</div>
            </el-tab-pane>
            <el-tab-pane name="u3">
              <span slot="label">
                <i class="el-icon-date"></i>
                动态
                <em>999</em>
              </span>
              <div>33</div>
            </el-tab-pane>
            <el-tab-pane name="u4">
              <span slot="label">
                <i class="el-icon-date"></i>
                动态
                <em>187</em>
              </span>
              <div>44</div>
            </el-tab-pane>
            <el-tab-pane name="u5">
              <span slot="label">
                <i class="el-icon-edit-outline"></i>
                我的反馈
               <em>{{recommendData.totals}}</em>
              </span>
              <div>
                <recommend :datas="recommendData.list"></recommend>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </main>
      <aside class="user-aside">
        <div class="user-focus">
          <div class="user-on-focus">
            <p class="user-focus-title">关注了</p>
            <p class="user-focus-content">1024</p>
          </div>
          <div>
            <p class="user-focus-title">关注者</p>
            <p class="user-focus-content">1024</p>
          </div>
        </div>
        <ul class="focus-list">
            <li>
              <span>关注的话题</span>
              <em>1</em>
            </li>
            <li>
              <span>关注的话题</span>
              <em>1</em>
            </li>
            <li>
              <span>关注的话题</span>
              <em>1</em>
            </li>
            <li>
              <span>关注的话题</span>
              <em>1</em>
            </li>
            <li>
              <span>关注的话题</span>
              <em>1</em>
            </li>
        </ul>
        <wx-footer></wx-footer>
      </aside>
    </div>
  </div>
</template>

<script>
import wxFooter from 'comp/footer'
import { mapGetters, mapActions } from 'vuex'
import recommend from './models/recommend'
export default {
  name: "user",
  data () {
    return {
      isShowChangeAvatar: false,
      recommendData: {
        list: null,
        totals: 0
      },
      loadings: false
    }
  },
  created () {
  },
  components: {
    wxFooter, recommend
  },
  computed: {
    ...mapGetters(['users', 'userToken'])
  },
  methods: {
    handleClick (tab, event) {
      this.loadings = true
      switch (tab.name) {
        case 'u1':
          break
        case 'u2':
          break
        case 'u3':
          break
        case 'u4':
          break
        case 'u5':
          this.doGetCommentByUserToken()
          break
        default:
          break
      }
    },
    doGetCommentByUserToken () {
      let params = {
        usertoken: this.userToken
      }
      this._getCommentByUserToken(params)
        .then((res) => {
          this.loadings = false
          this.recommendData =res.data.result
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    ...mapActions(['_getCommentByUserToken']),
    gotoUserInfo () { // 跳转至用户信息页面
      this.$router.push({name: 'userinfo'})
    }
  }
}
</script>

<style scoped lang="less">
  .user{
    overflow: hidden;
  }
  .change-into-btn{
    cursor: pointer;
    position: absolute;
    bottom: 15px;
    right: 10px;
    padding: 7px;
    border: 1px solid #0084ff;
    color: #0084ff;
    border-radius: 3px;
  }
.user-content{
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: space-between;
}
.user-aside{
  width: 24%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  .user-focus{
    display: flex;
    flex-direction: row;
    flex: 1;
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
    &>div{
      width: 50%;
      text-align: center;
      background: #ffffff;
      padding: 7px 0;
      .user-focus-title{
        font-size: 14px;
        line-height: 22px;
        color: #1b1b1b;
      }
      .user-focus-content{
        font-size: 18px;
        margin-top: 10px;
        color: #1b1b1b;
      }
    }
    div:hover{
      cursor: pointer;
      p{
        color: #175199!important;
      }
    }
    .user-on-focus{
      box-sizing: border-box;
      border-right: 1px solid #ebebeb;
    }
  }
  .focus-list{
    li{
      cursor: pointer;
      color: #646464;
      padding: 17px 10px;
      border-bottom: 1px solid #ebebeb;
      overflow: hidden;
      span{
        float: left;
      }
      em{
        float: right;
      }
    }
    li:hover{
      color: #175199;
    }
  }
}
.user-main{
  box-shadow: 0 1px 3px rgba(26,26,26,.1);
  padding: 20px;
  background: #ffffff;
  width: 74%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.user-info{
  background: #ffffff;
  margin-bottom:20px;
  .user-info-bg{
    z-index: 0;
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
    .user-info-bg-change-btn{
      cursor: pointer;
      position: absolute;
      right: 10px;
      top: 10px;
      padding: 8px;
      border: 1px solid rgba(26,26,26,.6);
      color: rgba(26,26,26,.6);
      border-radius: 3px;
      svg{
        fill: rgba(26,26,26,.6);
      }
    }
    img{
      width: 100%;
      margin-top: -60px;
    }
  }
  .user-info-content{
    z-index: 1;
    height: 94px;
    padding-bottom: 20px;
    position: relative;
    .user-avatar{
      width: 168px;
      height: 168px;
      position: absolute;
      top: -74px;
      left: 40px;
      border: 4px solid rgba(255,255,255,0.8);
      border-radius: 4px;
      img{
        width: 100%;
        height: 100%;
      }
      .user-avatar-change-btn{
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.4);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        svg{
          fill: #ffffff;
        }
      }
    }
    .users-all-info{
      padding-left: 228px;
      .user-name{
        font-size: 26px;
        line-height: 55px;
        font-weight: 600;
        span{
          font-size: 19px;
          line-height: 28px;
          font-weight: 400;
        }
      }
      .user-intro{
        font-size: 14px;
        line-height: 40px;
      }
    }
  }
}

</style>
